<template>
  <div class="TaskShow">
    <!-- <span style="width: 100%; text-align: center;">任务展示</span> -->
    <div class="left-item">
      <div class="item-header">
        <el-form ref="form">
          <el-form-item label="任务执行时间:">
            <el-date-picker
              v-model="executionTime"
              type="month"
              placeholder="选择日期时间"
              :picker-options="calendarEndPickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-button class="but-query" type="text" size="medium" @click="queryDateClick()">
            <i class="button-icon-image query-icon"></i>查询
          </el-button>
          <el-button class="but-confirm" type="text" size="medium">
            <!-- <i class="confirm-icon"></i>批量确认 -->
          </el-button>
        </el-form>
      </div>
      <div class="item-body">
        <div class="calendar-header">
          <ul>
            <li class="calendar-week" v-for="item in weeks" :key="item">{{item}}</li>
          </ul>
        </div>
        <div class="calendar-body">
          <ul>
            <li class="calendar-day" v-for="item in calendarArray" :key="item.time">
              <div
                class="calendar-day-text"
                :style="'color:' + (item.isCurrentMonth ? '#000' : '#bbb')"
              >{{item.day}}</div>
              <span v-if="item.list">
                <div
                  class="cal-task-name"
                  v-for="(item, index) in item.list.slice(0, 2)"
                  :key="index"
                  :style="'color:' + matchArrayContentWithKeyStr( 'color', item.taskStatus, remarks)"
                >{{calendarTaskName(item.taskName, item.executTime)}}</div>
                <span v-if="(item.count ? (item.count > 2 ? item.count - 2 : 0 ) : 0) != 0">
                  <el-button
                    class="more-task"
                    type="text"
                    size="mini"
                    @click="moreClick(item)"
                  >查看全部（{{item.count}}）</el-button>
                </span>
              </span>
              <!-- <div class="cal-task-name" :style="'color:' + matchArrayContentWithKeyStr( 'color', item.taskStatus, remarks)">110kv 主干道演示</div>
              <div class="cal-task-name" :style="'color:' + matchArrayContentWithKeyStr( 'color', item.taskStatus, remarks)">110kv 主干道演示</div>-->
            </li>
          </ul>
        </div>
      </div>
      <div class="item-footer">
        <span>备注：</span>
        <ul>
          <li
            class="footer-remarks"
            v-for="item in showRemarks"
            :key="item.text"
            :style="'color:' + item.color"
          >{{item.text}}</li>
        </ul>
      </div>
    </div>
    <div class="right-item">
      <div class="item-header">
        <el-form ref="form" label-width="80px">
          <el-row>
            <el-form-item label="任务状态:">
              <el-checkbox-group v-model="checkStatus">
                <el-checkbox
                  v-for="item in taskStatus"
                  :key="item.value"
                  :label="item.value"
                  name="type"
                >{{item.text}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="开始时间:">
                <el-date-picker
                  v-model="getTaskParm.startTime"
                  type="date"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd"
                  :picker-options="startPickerOptions"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间:">
                <el-date-picker
                  v-model="getTaskParm.endTime"
                  type="date"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd"
                  :picker-options="endPickerOptions"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="任务名称:">
              <el-input v-model="getTaskParm.taskName" class maxlength="15"></el-input>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <div class="item-body">
        <div class="first-area">
          <el-button class="but-query" type="text" size="medium" @click="queryClick()">
            <i class="button-icon-image query-icon"></i>查询
          </el-button>
          <el-button class="but-reset" type="text" size="medium" @click="addClick()">
            <i class="button-icon-image add-icon"></i>添加
          </el-button>
          <el-button class="but-export" type="text" size="medium" @click="removeClick()">
            <i class="button-icon-image remove-icon"></i>删除
          </el-button>
        </div>
        <el-table
          :data="showTableData"
          border
          stripe
          ref="tasksTable"
          size="mini"
          style="width: 100%;"
          height="calc(100% - 30px)"
          @selection-change="handleSelectionChange"
          @row-click="handleClick"
        >
          <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
          <el-table-column type="selection" :selectable="isSelectable" align="center" width="50"></el-table-column>
          <el-table-column prop="taskName" label="任务名称"></el-table-column>
          <el-table-column width="150px" prop="executTime" label="执行时间"></el-table-column>
          <el-table-column width="80px" label="任务状态">
            <template slot-scope="scope">
              <span
                :style="'color:' + matchArrayContentWithKeyStr( 'color', scope.row.taskStatus, remarks)"
              >{{scope.row ? matchArrayContentStr(scope.row.taskStatus, taskStatus) : "未知"}}</span>
            </template>
          </el-table-column>
          <el-table-column width="50px" label="操作">
            <template slot-scope="scope">
              <el-button
                class="edit-button"
                type="text"
                size="mini"
                :disabled="scope.row.taskStatus == 0 || scope.row.taskStatus == 3"
                :style="'color:' + ((scope.row.taskStatus === 0 || scope.row.taskStatus === 3) ? '#bbb' : '#0000FF')"
                @click="editClick(scope.row)"
              >修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="item-footer">
        <el-pagination
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :pager-count="5"
          :page-sizes="[20, 50, 100, 300]"
          :page-size="tableSize"
          :current-page="tablePage"
          :total="tansksTotal"
        ></el-pagination>
      </div>
    </div>
    <!-- <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      :before-close="handleClose"
      width="20%"
      left
    >
      <div class="dialog-body">
        <el-radio-group class="body-radio-group" v-model="removeType">
          <el-radio :label="0">当前</el-radio>
          <el-radio :label="1">周期</el-radio>
        </el-radio-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false, removeType = 0">取 消</el-button>
          <el-button type="primary" @click="dialogConfirm()">确 定</el-button>
        </span>
      </div>
    </el-dialog>-->
    <el-dialog
      class="task-remove-dialog"
      title="提示"
      :visible.sync="tableDialogVisible"
      :before-close="tableHandleClose"
      width="50%"
      left
    >
      <el-table
        :data="dialogTableData"
        border
        stripe
        size="mini"
        style="width: 100%;"
        height="100%"
      >
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <!-- <el-table-column type="selection" :selectable="isSelectable" align="center" width="50"></el-table-column> -->
        <el-table-column prop="taskName" label="任务名称"></el-table-column>
        <el-table-column width="150px" prop="executTime" label="执行时间"></el-table-column>
        <el-table-column width="80px" label="任务状态">
          <template slot-scope="scope">
            <span
              :style="'color:' + matchArrayContentWithKeyStr( 'color', scope.row.taskStatus, remarks)"
            >{{scope.row ? matchArrayContentStr(scope.row.taskStatus, taskStatus) : "未知"}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      class="task-management-dialog"
      title="提示"
      :visible.sync="deleteTaskDialogVisible"
      width="20%"
      left
    >
      <div class="dialog-body">
        <div
          class="body-title"
        >{{multipleSelection.length > 1 ? '确认批量删除任务吗 ?' + '（' + multipleSelection.length + '）' : '确认删除该任务吗 ?'}}</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteTaskDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="removeTaskConfirm">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  tasksMonthShow,
  tasksExecutePlan,
  deleteTasksExecutePlan,
  postOperationLogs
} from "@/api/apiManagement";
import {
  matchArrayContent,
  matchArrayContentWithKey,
  TaskStatus,
  TaskStatusRemarks,
  InspectTypePath
} from "@/utils/constant";
import { dateToDateStr, getDateTopMonth } from "@/utils/utilsMethod";

export default {
  data() {
    return {
      robot_id: null,
      weeks: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      calendarArray: [
        {
          time: "2019-5-9",
          day: "9",
          taskList: []
        }
      ],
      executionTime: "",
      executionTimeStr: "",
      remarks: TaskStatusRemarks,
      showRemarks: TaskStatusRemarks.slice(0, TaskStatusRemarks.length - 1),
      taskStatus: TaskStatus.slice(0, TaskStatusRemarks.length - 1),
      checkStatus: [],
      getTaskParm: {
        startTime: "",
        endTime: "",
        taskName: "",
        robotId: 1
      },
      tablePage: 1,
      tableSize: 20,
      tableData: [],
      showTableData: [],
      multipleSelection: [],
      tansksTotal: 0,
      tableDialogVisible: false,
      deleteTaskDialogVisible: false,
      // centerDialogVisible: false,
      removeType: 0,
      calendarEndPickerOptions: {
        disabledDate: time => {
          return time.getTime() > Date.now() - 8.64e6;
        }
      },
      startPickerOptions: {
        disabledDate: time => {
          let endTime =
            this.getTaskParm.endTime === null ? "" : this.getTaskParm.endTime;
          return (
            time.getTime() > new Date(endTime).getTime() ||
            time.getTime() > Date.now() - 8.64e6
          );
        }
      },
      endPickerOptions: {
        disabledDate: time => {
          let startTime =
            this.getTaskParm.startTime === null
              ? ""
              : this.getTaskParm.startTime;
          return (
            time.getTime() <
              new Date(startTime).getTime() - 8 * 60 * 60 * 1000 ||
            time.getTime() > Date.now() - 8.64e6
          ); //如果没有后面的-8.64e6就是不可以选择今天的   减去一天的时间代表可以选择同一天
        }
      },
      dialogTableData: []
    };
  },
  created() {
    this.robot_id = localStorage.getItem("ydRobot_id");
    this.getTaskParm.robotId = this.robot_id;
    this.getTaskParm.startTime = dateToDateStr(getDateTopMonth(new Date()));
    this.getTaskParm.endTime = dateToDateStr(new Date());
    //
    this.settingCalendarArray();
    this.gettasksExecutePlan();
  },
  mounted() {},
  methods: {
    gettasksExecutePlan() {
      if (this.checkStatus) {
        this.getTaskParm.taskStatus = this.checkStatus.join(",");
      }
      if (this.getTaskParm.taskStatus.indexOf("2") != -1) {
        this.getTaskParm.taskStatus = this.getTaskParm.taskStatus + ",8"
      }
      this.getTaskParm.startTime =
        this.getTaskParm.startTime == null ? "" : this.getTaskParm.startTime;
      this.getTaskParm.endTime =
        this.getTaskParm.endTime == null
          ? ""
          : this.getTaskParm.endTime.length <= 10 &&
            this.getTaskParm.endTime.length != 0
          ? this.getTaskParm.endTime + " 24:00:00"
          : this.getTaskParm.endTime;
      tasksExecutePlan(this.getTaskParm)
        .then(response => {
          this.tableData = response;
          this.tansksTotal = response.length;

          let totalPage = parseInt(this.tansksTotal/this.tableSize)
          let actualTotalPage = this.tansksTotal%this.tableSize === 0 ? totalPage : totalPage + 1
          let actualCurrentPage = actualTotalPage > this.tablePage ? this.tablePage : actualTotalPage
          this.showTableData = this.tableData.slice(
            (actualCurrentPage - 1) * this.tableSize,
            actualCurrentPage * this.tableSize
          );
        })
        .catch(() => {});
    },
    getTasksMonthShow() {
      tasksMonthShow({
        robotId: this.robot_id,
        executeTime: this.executionTimeStr
      })
        .then(response => {
          if (response) {
            for (var i = 0, len = this.calendarArray.length; i < len; i++) {
              response.forEach((item, index) => {
                if (
                  this.judgeData(item.groupDate, this.calendarArray[i].time)
                ) {
                  this.calendarArray[i].count = item.count;
                  this.calendarArray[i].list = item.list;
                }
              });
            }
            let temp = this.calendarArray.slice(0, 1);
            this.calendarArray.splice(0, 1, temp[0]);
          }
        })
        .catch(() => {});
    },
    judgeData(date, targetDate) {
      if (date && targetDate) {
        let dateArray = date.split("-");
        let targetDateArray = targetDate.split("-");
        if (
          dateArray.length === targetDateArray.length &&
          parseInt(dateArray[0]) === parseInt(targetDateArray[0]) &&
          parseInt(dateArray[1]) === parseInt(targetDateArray[1]) &&
          parseInt(dateArray[2]) === parseInt(targetDateArray[2])
        ) {
          return true;
        }
      }
      return false;
    },
    settingCalendarArray(date) {
      this.calendarArray = [];
      //判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
      function isLeap(year) {
        return year % 4 == 0
          ? year % 100 != 0
            ? 1
            : year % 400 == 0
            ? 1
            : 0
          : 0;
      }
      var i,
        k,
        today = date ? date : new Date(), //获取当前日期
        y = today.getFullYear(), //获取日期中的年份
        m = today.getMonth(), //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
        d = today.getDate(), //获取日期中的日(方便在建立日期表格时高亮显示当天)
        firstday = new Date(y, m, 1), //获取当月的第一天
        dayOfWeek = firstday.getDay(), //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
        days_per_month = new Array(
          31,
          28 + isLeap(y),
          31,
          30,
          31,
          30,
          31,
          31,
          30,
          31,
          30,
          31
        ), //创建月份数组
        cur_month_days = days_per_month[m], // 当前月的天数
        pre_month_days = days_per_month[m <= 0 ? 11 : m - 1], // 上个月
        next_month_days = days_per_month[m + 1 >= 11 ? 0 : m + 1], // 下个月
        str_nums = Math.ceil((dayOfWeek + cur_month_days) / 7); //确定日期表格所需的行数
      for (let i = 0; i < str_nums * 7; i++) {
        let time = "";
        let day = "";
        let currentMonth = false;
        if (i < dayOfWeek) {
          day = pre_month_days - (dayOfWeek - 1 - i);
          time = (m <= 0 ? y - 1 : y) + "-" + m + "-" + day;
        } else if (dayOfWeek + cur_month_days > i) {
          day = i - (dayOfWeek - 1);
          time = y + "-" + (m + 1) + "-" + day;
          currentMonth = true;
        } else {
          day = i - cur_month_days - (dayOfWeek - 1);
          time = (m >= 11 ? y + 1 : y) + "-" + (m + 2) + "-" + day;
        }
        this.calendarArray.push({
          time: time,
          day: day,
          isCurrentMonth: currentMonth
        });
      }
      this.executionTime = today;
      this.executionTimeStr = y + "-" + (m + 1) + "-" + d;
      this.getTasksMonthShow();
    },
    queryDateClick() {
      this.settingCalendarArray(this.executionTime ? this.executionTime : "");
    },
    queryClick() {
      this.gettasksExecutePlan();
    },
    addClick() {
      this.$router.push({ path: "/tasks/custom-task" });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick(row, column, event) {
      if (row.taskStatus != 0 && row.taskStatus != 3) {
        this.$refs.tasksTable.toggleRowSelection(row);
      }
    },
    removeClick() {
      if (this.multipleSelection.length > 0) {
        this.deleteTaskDialogVisible = true;
      } else {
        this.$message("请选择任务");
      }
    },
    removeTaskConfirm() {
      var parm = [];
      parm = this.multipleSelection.map(item => {
        return {
          id: item.id,
          taskType: item.taskType
        };
      });
      deleteTasksExecutePlan({ deleteExecutePlanRequests: parm })
        .then(response => {
          this.multipleSelection.forEach(item => {
            this.setOperationLogs("删除-" + item.taskName + "-任务");
          });
          this.deleteTaskDialogVisible = false;
          this.gettasksExecutePlan();
        })
        .catch(() => {});
    },
    editClick(val) {
      let path = matchArrayContentWithKey(
        "path",
        val.inspectTypeId,
        InspectTypePath
      );
      if (path && path.length > 0) {
        this.$router.push({
          path: path,
          query: { id: val.inspectTypeId }
        });
      }
    },
    isSelectable(row, index) {
      if (row.taskStatus === 0 || row.taskStatus === 3) {
        return false;
      }
      return true;
    },
    handleSizeChange(val) {
      this.tableSize = val;
      this.showTableData = this.tableData.slice(
        (this.tablePage - 1) * this.tableSize,
        this.tablePage * this.tableSize
      );
    },
    handleCurrentChange(val) {
      this.tablePage = val;
      this.showTableData = this.tableData.slice(
        (this.tablePage - 1) * this.tableSize,
        this.tablePage * this.tableSize
      );
    },
    // handleClose() {
    //   this.centerDialogVisible = false;
    //   this.removeType = 0;
    // },
    // dialogConfirm() {
    //   this.centerDialogVisible = false;
    // },
    // 匹配类型返回
    matchArrayContentStr(val, array) {
      return matchArrayContent(val, array);
    },
    // 匹配类型返回
    matchArrayContentWithKeyStr(key, val, array) {
      return matchArrayContentWithKey(key, val, array);
    },
    moreClick(val) {
      this.tableDialogVisible = true;
      this.dialogTableData = val.list;
    },
    tableHandleClose() {
      this.tableDialogVisible = false;
    },
    calendarTaskName(taskName, taskTime) {
      taskTime = taskTime ? taskTime : "";
      var i,
        k,
        today = new Date(taskTime), //获取当前日期
        h = today.getHours(), //获取系统时，
        m = today.getMinutes(); //分
      let moment = "凌晨";
      if (h < 6) {
        moment = "凌晨";
      } else if (h < 9) {
        moment = "早上";
      } else if (h < 12) {
        moment = "上午";
      } else if (h < 14) {
        moment = "中午";
      } else if (h < 17) {
        moment = "下午";
      } else if (h < 19) {
        moment = "傍晚";
      } else if (h < 22) {
        moment = "晚上";
      } else {
        moment = "夜间";
      }

      return h + ":" + m + " " + moment + " " + taskName;
    },
    // 添加日志管理
    setOperationLogs(content) {
      var parm = {
        content: content,
        deviceId: localStorage.getItem("ydRobot_device_id"),
        type: 0
      };
      postOperationLogs(parm)
        .then(response => {})
        .catch(() => {});
    }
  }
};
</script>

<style>
.TaskShow {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
  font-size: 12px;
}
.TaskShow .el-form-item {
  margin-top: 1px;
  margin-bottom: 0;
  float: left;
}
.TaskShow ul {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  overflow: hidden;
}
.TaskShow .el-form-item__label {
  font-size: 13px;
  line-height: 26px;
}
.TaskShow .el-input__inner {
  font-size: 13px;
}
.TaskShow .el-form-item__content {
  width: 160px;
  margin-left: 5px !important;
  line-height: 26px;
  float: left;
}
.TaskShow .el-date-editor.el-input {
  width: 150px;
}
.TaskShow .el-input__inner {
  height: 26px;
  line-height: 26px;
}
.TaskShow .el-input__icon {
  line-height: 26px;
}
.TaskShow .left-item .el-button,
.TaskShow .right-item .el-button {
  height: 29px;
  padding: 0;
  float: left;
  color: #000;
  font-size: 13px;
  margin: 0px 10px;
}
.TaskShow .left-item {
  width: 60%;
  height: 100%;
  border-left: solid 1px #90e8c6;
  border-top: solid 1px #90e8c6;
  background: #ffffff;
  position: relative;
  min-width: 450px;
}
.TaskShow .left-item .item-header {
  width: 100%;
  height: 30px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
  border-top: 1px solid rgb(202, 231, 238);
  padding-left: 5px;
}
.TaskShow .button-icon-image {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-size: 100% 100%;
  float: left;
}
.TaskShow .query-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/query.png);
  background-size: 100% 100%;
  float: left;
}
.TaskShow .add-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/add.png);
  background-size: 100% 100%;
  float: left;
}
.TaskShow .remove-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/remove.png);
  background-size: 100% 100%;
  float: left;
}
.TaskShow .left-item .item-body {
  width: 100%;
  height: calc(100% - 50px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0px 5px;
}
.TaskShow .calendar-header {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 1px;
  overflow: hidden;
}
.TaskShow .calendar-week {
  width: calc(100% / 7);
  float: left;
  font-size: 14px;
}
.TaskShow .calendar-body {
  width: 100%;
  border-top: solid 1px #dce8ff;
}
.TaskShow .calendar-day {
  width: calc(100% / 7);
  height: 100px;
  float: left;
  border-left: solid 1px #dce8ff;
  border-bottom: solid 1px #dce8ff;
  overflow: hidden;
}
.TaskShow .calendar-day:nth-child(7n) {
  border-right: solid 1px #dce8ff;
  background: #ecf6fa;
}
.TaskShow .calendar-day:nth-child(7n + 1) {
  background: #ecf6fa;
}
.TaskShow .calendar-day .calendar-day-text {
  text-align: right;
}
.TaskShow .cal-task-name {
  max-height: 26px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 3px 5px;
}
.TaskShow .left-item .more-task {
  padding: 0px;
  float: none;
  display: block;
  margin: 0 auto;
  height: 20px;
  color: blue;
  font-size: 12px;
  text-decoration: underline;
}
.TaskShow .left-item .item-footer {
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0px;
  background: #ecf6fa;
  line-height: 20px;
  overflow: hidden;
}
.TaskShow .left-item .item-footer span {
  float: left;
}
.TaskShow .footer-remarks {
  float: left;
  margin: 0px 10px;
}
.TaskShow .right-item {
  width: 40%;
  height: 100%;
  border: solid 2px #90e8c6;
  background: white;
  overflow: hidden;
}
.TaskShow .right-item .item-header {
  background: #eeeeee;
  width: 100%;
  overflow: hidden;
  height: 117px;
}
.TaskShow .right-item .item-header .el-form-item__content {
  width: calc(100% - 100px);
}
.TaskShow .right-item .item-header .el-checkbox {
  float: left;
}
.TaskShow .right-item .item-header .el-row:last-child {
  margin: 5px 0px;
}
.TaskShow .right-item .item-body {
  border-top: solid 2px #90e8c6;
  height: calc(100% - 117px - 32px);
  overflow: hidden;
}
.TaskShow .item-body .first-area {
  background: #eeeeee;
  overflow: hidden;
  height: 30px;
}
.TaskShow .right-item .edit-button {
  margin: 0px;
}
.TaskShow .right-item .item-footer {
  height: 32px;
}

.TaskShow .task-remove-dialog .el-dialog {
  height: 65%;
}

.TaskShow .el-dialog {
  background-color: rgb(215, 239, 236);
  padding-bottom: 5px;
  overflow: hidden;
}
.TaskShow .task-remove-dialog .el-dialog__header {
  padding: 0px 5px;
}
.TaskShow .task-remove-dialog .el-dialog__header .el-dialog__title {
  font-size: 13px;
}
.TaskShow .task-remove-dialog .el-dialog__headerbtn {
  top: 3px;
  right: 10px;
}
.TaskShow .task-remove-dialog .el-dialog__body {
  border: 1px solid #90e8c6;
  background-color: white;
  margin: 0px 5px;
  padding: 0px;
  height: calc(100% - 24px);
}
.TaskShow .task-remove-dialog .body-radio-group {
  width: 100%;
  text-align: center;
  margin: 30px 0px;
}
.TaskShow .task-remove-dialog .dialog-footer {
  display: block;
  text-align: center;
  margin-bottom: 20px;
}
.TaskShow .task-remove-dialog .dialog-footer .el-button {
  padding: 5px 25px;
  margin-top: 5px;
  font-size: 13px;
}

.TaskShow .task-management-dialog .el-dialog__header {
  padding: 0px 5px;
}
.TaskShow .task-management-dialog .el-dialog__header .el-dialog__title {
  font-size: 13px;
}
.TaskShow .task-management-dialog .el-dialog__headerbtn {
  top: 3px;
  right: 10px;
}
.TaskShow .task-management-dialog .el-dialog__body {
  border: 1px solid #90e8c6;
  background-color: white;
  margin: 0px 5px;
  padding: 0px;
}
.TaskShow .task-management-dialog .dialog-body .body-title {
  margin: 20px 10px;
}
.TaskShow .task-management-dialog .dialog-footer {
  display: block;
  text-align: center;
  margin: 15px 0px;
}
.TaskShow .task-management-dialog .dialog-footer .el-button {
  padding: 5px 25px;
  margin-top: 5px;
  font-size: 13px;
}
.TaskShow .task-management-dialog .el-form {
  margin-left: 30px;
}
.TaskShow .task-management-dialog .el-form-item label {
  width: 65px;
  padding: 0px;
}
.TaskShow .task-management-dialog .el-form-item__content {
  text-align: left;
}
.TaskShow .task-management-dialog .add-dialog-input {
  width: 210px;
  height: 27px;
}
.TaskShow .task-management-dialog .add-dialog-input .el-input__inner {
  height: 26px;
  line-height: 24px;
  border: 1px solid rgb(202, 231, 238);
}
</style>